<template>
    <div class="storeInfo scheduling">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item>
                    <el-date-picker v-model="year" type="year" format="yyyy"  placeholder="选择年"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="month" format="MM" type="month"  placeholder="选择月"></el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.staff_id" placeholder="店内员工">

                        <el-option v-for="staff in storeStaff.leader" :key="staff.user_id" :label="staff.name" :value="staff.staff_id">{{staff.name}}({{staff.role_name}})</el-option>
                        <el-option v-for="staff in storeStaff.staff" :key="staff.user_id" :label="staff.name" :value="staff.staff_id">{{staff.name}}({{staff.role_name}})</el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.type" placeholder="班次">
                        <el-option v-for="item in jobtime" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="primary" icon="el-icon-download" @click="exportBtn">导出</el-button>
                <el-button type="warning" icon="el-icon-s-check" @click="rangeBanFn('lead')">店长排班</el-button>
                <el-button type="warning" icon="el-icon-s-custom" @click="rangeBanFn('worker')">排班</el-button>
                
                

            </el-form>      
        </div>
        <div class="currDate">
            <p>
                <span class="icon el-icon-arrow-left" @click="changeCurrentdate('pre')"></span>
                <span class="showCurrDate">{{under_year}}年{{under_month}}月</span>
                <span class="icon el-icon-arrow-right" @click="changeCurrentdate('next')"></span>
            </p>
        </div> 
        <!-- tab部分 -->
        <div class="tabContainer">
            <ul class="col_7 col_7_head">
                <li v-for="witem in week" :key="witem.status">{{witem.status_cn}}</li>
            </ul> 
            <div v-if="tableData.length != 0">
                <ul class="col_7 col_7_content" v-for="(seven,s) in tableData" :key="s">
                    <!-- <li></li> -->
                    <li v-for="(item,i) in seven" :key="i" :class="item.datetime | ago_current">
                        <div>
                            <p class="gray">{{item.datetime}}</p>
                            <div v-if="item.leader != undefined || item.type.length != 0">
                                <div>
                                    <div class="staffDiv" v-if="item.leader != undefined">
                                        <p>
                                            <span>{{item.leader[0].nickname}}<br/></span>
                                        </p>
                                        <p>
                                            <!-- <button class="col_btn">编辑</button> -->
                                            <button class="col_btn" @click="staffClick('del',item.leader[0],item.datetim)">删除</button> 
                                        </p>                                  
                                    </div>
                                    <div v-else>/</div>
                                </div>
                                <div v-for="(titem,t) in item.type" :key="t">
                                    <p class="banBg">{{titem.name}}({{titem.total}})</p>
                                    <div v-for="(listitem,lt) in titem.list" :key="lt">
                                        <div class="staffDiv">
                                            <span class="staffName">{{listitem.nickname}}</span>   
                                            <p>
                                                <button class="col_btn" @click="staffClick('edit',listitem,item.datetime)">编辑</button>
                                                <button class="col_btn" @click="staffClick('del',listitem,item.datetime)">删除</button> 
                                            </p>                                  
                                        </div>
                                    </div>   
                                </div>
                                    
                            </div>
                            <div v-else>没有排班信息</div>
                        </div>
                    </li>
                </ul>  
            </div>                 
        </div>
        
        <!-- 排版弹框 -->
        <el-dialog :title="rangeBan" :visible.sync="rangeBanShow" class="business rangebox">
            <el-form ref="form" :model="editForm" label-width="80px">
                <p class="staffLable">选择员工</p>
                <div class="staffBoxShow clear" v-if="rangeBan == '门店店长的排班'">
                    <p  v-for='(leadItem,l) in storeStaff.leader' :key="leadItem.user_id" :class="leadItem.ac+' staffPitem'" @click="chooseStaff(l,'lead')">{{leadItem.name}}</p>
                </div>
                <div v-else>
                    <div class="staffBoxShow clear">
                        <p  v-for='(leadItem,s) in storeStaff.staff' :key="leadItem.user_id" :class="leadItem.ac+' staffPitem'" @click="chooseStaff(s,'staff')">{{leadItem.name}}</p>
                    </div>
                    <p class="staffLable" style="margin-top:16px">选择班次</p>
                    <div class="staffBoxShow clear">
                        <p v-for="(earlyItem,e) in early" :key="earlyItem.type" @click="earlyFn(e)" :class="earlyItem.ac+' staffPitem'">{{earlyItem.type_cn}}</p>
                    </div>
                </div>
                    
                <datepart v-on:getDateArr="formmonthdate" :y="year" :m="month"></datepart>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rangeBanShow = false">取 消</el-button>
                <el-button type="primary" @click="confrim">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改排班 -->
        <el-dialog title="修改排班" :visible.sync="editBanShow" class="business editbanbox">
            <el-form ref="form" :model="editbanForm" label-width="100px">
                <p class="staffLable editBantxt">{{editbaninfo}}</p>
                <el-form-item label="" v-if="editbanselect != ''">
                    <el-select clearable v-model="editbanselect" placeholder="店内员工">
                        <el-option v-for="staff in storeStaff.staff" :key="staff.user_id" :label="staff.name" :value="staff.user_id">{{staff.name}}({{staff.role_name}})</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editBanShow = false">取 消</el-button>
                <el-button type="primary" @click="confrimedit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style lang="scss">
.scheduling .rangebox .el-dialog{
    width: 800px !important;
}
.editbanbox .el-input{
    width: 200px;
    margin-top: 10px
    
}
</style>
<style lang="scss" scoped>

.currDate{
    text-align: center;
    line-height: 60px;
    font-size:20px;
    font-weight: 900;
    .showCurrDate{
        margin: 0 10px;
    }
    .icon{
        cursor:pointer;
    }
}
.col_7{
    display: flex;
    flex-direction: row;
    background: #fff;
    li{
        flex-grow:1;
        padding-left:17px;        
        border-right:1px solid #DCDFE6; 
    }
    li:last-child{
        border-right:0
    }
}
.col_7_head{
    li{
        line-height: 47px;
        text-align: center;
    }
    
}
.col_7_content{
    border-top:1px solid #DCDFE6;
    font-size:14px;
    line-height: 20px;
    .ago{
        color:#ccc;
        .banBg{
            background: #DCDFE6;
            color:#ccc;
        } 
    }
    .future{
        color:#000;
        .banBg{
            background: #409EFF;
            color:#fff;
        }
        .staffDiv:hover{
            .col_btn{
                opacity: 1;
            }
        } 
    }
    li{
        min-height: 160px;
        width:14.28%;
        .staffDiv{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .col_btn{
            // padding:5px 8px;
            color:#409EFF;
            opacity: 0;
            border:none;
            background: transparent;
        }
        .col_pos{
            width:20px;
            text-align: center;
        }
    } 
     

}
.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clear{zoom:1}
.staffLable{color:#7f7f7f;font-size:12px;}
.staffBoxShow{
    .staffPitem{
        width:66px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border:1px solid #e5e5e5;
        border-radius: 3px;
        float: left;
        overflow: hidden;
        margin-right: 16px;
        margin-top: 16px;
        cursor: pointer;
    }   
    .ac{
        background: #8163f5;
        color: #fff;
    } 
}
.editBantxt{
    font-size: 20px;
    padding: 10px 0;
    margin-left: 100px;
}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import datepart from "../../pop/monthdate.vue";
// import Vue from 'vue';
let dateObj = new Date(),
monthnow = dateObj.getMonth()+1,
y = dateObj.getFullYear();
monthnow>9?monthnow=monthnow:monthnow=('0'+monthnow)
export default {
    components:{
        datepart
    },
    data(){
        return {          
            tableData:[],
            form:{
                month: y+'-'+monthnow,
            },           
            storeStaff:{},
            timerange:[],
            jobtime:[
                {status:'1',status_cn:"早班"},
                {status:'2',status_cn:"晚班"},
            ],
            year:y+'',
            month:monthnow,
            under_year:y,
            under_month:monthnow,
            week:[
                {status_cn:"周日",status:'0'},
                {status_cn:"周一",status:'1'},
                {status_cn:"周二",status:'2'},
                {status_cn:"周三",status:'3'},
                {status_cn:"周四",status:'4'},
                {status_cn:"周五",status:'5'},
                {status_cn:"周六",status:'6'},
                
            ],   
            emptyitem:{datetime:"0000-00-00",type:[]},
            editForm:{},
            rangeBan:'',
            rangeBanShow:false,
            early:[
                {type:'1',type_cn:'早班',ac:''},
                {type:'2',type_cn:'晚班',ac:''},
            ],
            yesobj:{},
            editBanShow:false,
            editbaninfo:'',
            editbanForm:{},
            editbanselect:''
        }
    },
    mounted(){
        var that = this;
        that.getList();
        abc.storeStaff(that,function() {
            that.storeStaff.leader.map((item,l)=>{
                item.ac = ''
            })
            that.storeStaff.staff.map((item,s)=>{
                item.ac = ''
            })
            
        });
    },
    
    methods:{
        search(){
            let that = this,mmm='',yyy='';
            if(typeof that.month == 'object'){
                mmm = (that.month.getMonth()+1)>9?(that.month.getMonth()+1):'0'+(that.month.getMonth()+1); 
            }else{
                mmm = that.month;
            }            
            if(typeof that.year == 'object'){
                yyy = that.year.getFullYear();  
            }else{
                yyy = that.year
            }            
            that.under_month = mmm
            that.under_year = yyy
            that.form.month =yyy +'-'+mmm;
            that.getList()
            
        },         
        getList(){
            let that = this;
            abc.get(that,potUrl.scheduallist,that.form,(res)=>{
                let data = res.data;
                let myDate = new Date(Date.parse(data[0].datetime));  
                let n = myDate.getDay(),emarr=[]
                for(var i=0;i<n;i++){
                   emarr.push(that.emptyitem)
                }

                let data2 =  emarr.concat(data);
                let data3 = [],arr = [];
                data2.map((item,i)=>{  
                                    
                    if(i%7 == 0 && i != 0){
                        data3.push(arr)
                        arr = []
                    }
                    arr.push(item); 
                    if(i == (data2.length-1)) {
                        data3.push(arr)
                    }
                })
                let nn = 7-data3[data3.length-1].length;
                for(var last=0;last<nn;last++){
                    data3[data3.length-1].push(that.emptyitem)
                }
                that.tableData = data3;

            });//列表
        },
        changeCurrentdate(a){
            //头部得左右切换月份得事件
            const that = this;
            let m = parseInt(that.under_month);
            let y = parseInt(that.under_year)
            if(a == 'pre'){               
               m--;
               if(m == 0){
                   y--;
                   m = 12
                   that.under_year = y
               }
               that.month = m>9?m:'0'+m;
            }else{
                m++;
               if(m > 12){
                   y++;
                   m = 1
                   that.under_year = y
               }
            }
            that.under_month = m>9?m:'0'+m;

            that.year = that.under_year+''
            that.month = that.under_month+"";
            
            that.form.month =that.under_year +'-'+that.under_month;
            that.getList()
        },
        staffClick(a,b,c){
            var that = this,week=this.week[new Date(c).getDay()].status_cn,txt=b.nickname +'”'+ c +week;
            this.editBanShow = true;
            that.editbanForm.schedual_id = b.schedual_id
            if(a == 'edit'){                
                this.editbaninfo = '员工“'+ txt
                that.editbanselect = b.user_id;                
            }else{
                this.editbaninfo = '是否要删除员工“'+ txt+'的排班计划？'
                that.editbanselect=''
            }
        },
        formmonthdate(data){
            const that = this;
            that.yesobj.day = data;
        },
        rangeBanFn(a){
            const that = this;
            that.rangeBanShow = true;
            if(a == 'lead'){
                //店长排班
                that.rangeBan = '门店店长的排班'
            }else{
                //店员排班
                that.rangeBan = '门店店员的排班'
                
            }
        },
        chooseStaff(a,b){
            const that = this;
            if(b=='lead'){
                that.storeStaff.leader[a].ac == ''?that.storeStaff.leader[a].ac='ac':that.storeStaff.leader[a].ac='';
                
            }else{
                that.storeStaff.staff[a].ac == ''?that.storeStaff.staff[a].ac='ac':that.storeStaff.staff[a].ac='';
                
            }
            that.$forceUpdate()
        },
        earlyFn(a){
            const that = this;
            that.early.map((item)=>{
                item.ac = ''
            })
            that.early[a].ac='ac';
            that.yesobj.type = that.early[a].type
        },
        exportBtn(){
            window.location.href = abc.hostUrl + '/operate/schedual/export' + abc.getSession('params') + '&month='+this.form.month;
        },
        confrim(){
            const that = this;
            let strUser = '',arrUser=[],obj=[];
            if(that.rangeBan == '门店店长的排班'){
                obj = that.storeStaff.leader;
                that.yesobj.type='3';
            }else{
                obj = that.storeStaff.staff               
            }
            obj.map((item,i)=>{
                if(item.ac == 'ac'){
                    arrUser.push(item.user_id)
                }
            }) 
            strUser = arrUser.join(',');
            that.yesobj.user_id = strUser
            abc.post(that,potUrl.schedualadd,that.yesobj,function(res){
                that.rangeBanShow = false;
                that.getList();
            })
        },
        confrimedit(){
            let that = this,url='';
            if(that.editbanselect != ''){
                that.editbanForm.user_id = that.editbanselect;
                url = potUrl.schedualedit
            }else{
                url = potUrl.schedualdelete
            }
            
            abc.post(that,url,that.editbanForm,function() {
                that.editBanShow = false;
                that.getList();
            })
        }
    }
}
 

</script>